<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
    <title>ABCDessin</title>

	<link rel="stylesheet" href="jquery.mobile.custom/custom.css" />
	<link rel="stylesheet" href="jquery.mobile/jquery.mobile.structure-1.2.0.css" />
	<link rel="stylesheet" href="css/icons-pack/jqm-icons.css" />
	<link rel="stylesheet" href="css/style.css" />
	
    <script src="jquery.mobile/jquery-1.7.2.min.js"></script>
	<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
	
	<script type="text/javascript" charset="utf-8" src="apis/device.js"></script>
    <script type="text/javascript" charset="utf-8" src="apis/media.js"></script>
    <script type="text/javascript" charset="utf-8" src="apis/storage.js"></script>
    
    <script type="text/javascript" charset="utf-8" src="js-project/charts.js"></script>
    <script type="text/javascript" charset="utf-8" src="js-project/bdd-handler.js"></script>
	<script type="text/javascript" charset="utf-8" src="js-project/image-handler.js"></script>
	<script type="text/javascript" charset="utf-8" src="js-project/song-handler.js"></script>
	
	<script type="text/javascript" charset="utf-8" src="index.js"></script>

	<script type="text/javascript">

		initializeCanvasSize = function () {
			var h = $(window).height();
			var l = $(window).width();
			
			var canvas = document.getElementById('chart');
	        var context = canvas.getContext('2d');
			canvas.height = h;
            canvas.width = l;
            canvas.style.height = h + "px";
            canvas.style.width = (l - 10) + "px";
		};
		initializeChart = function () {
			// On initialise le dessin du graphique
	        if(!!document.createElement('canvas').getContext) {
	            var mychart = new AwesomeChart('chart');
	            mychart.title = "Progression ordre";
	            
	            // On récupère les résultats pour l'application de dessin
	            var resManager = new scoreManager();
	            //resManager.testScore();
	            var data = resManager.getScores('ordre');
	            var values = new Array();
	            var lib = new Array();
	            
	            // On récupère les valeurs qui nous interesse
	            for(var i=0; i<data.length; i++ ) {
	            	values.push(data[i].goodScore);
	            	values.push(data[i].badScore);
	            	lib.push(data[i].date + " + ");
	            	lib.push(data[i].date + " - ");
	            }
	            
	          mychart.data = values;
	          mychart.labels = lib;
	            
	            mychart.draw();
	        }
		};
		$(document).ready(function() {
			
			// On initialise le canvas qui contiendra le graphique
			initializeCanvasSize();
			
			//On initialise le grahique
			initializeChart();
	    	
		});
	</script>
  
	<!-- CDN Respositories: For production, replace lines above with these uncommented minified versions -->
	<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />-->
	<!-- <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>-->
	<!-- <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>-->
	</head>
  <body>
	<div id="page" data-role="page" id="page-apprentissage" class="type-interior" data-theme="a">
		<div data-role="header" data-theme="a">
			<h1>R&eacute;sultats Ordre </h1>
	 		<a href="resultats.html" rel="external"  data-icon="home" data-iconpos="notext" id="intro" class="ui-btn-right">Accueil</a>
		</div>
		<div id="content" data-role="content" data-theme="a">
			<canvas id="chart">
        		Your web-browser does not support the HTML 5 canvas element.
    		</canvas>
		</div>	
	</div>			
  </body>
</html>